<template>
  <div class="app-layout">

    <!-- 主体内容区 -->
    <div class="main-body">

      
      <!-- 主内容区 -->
      <div class="main-content">
        <!-- 页面标题栏 -->
        <PageTitleBar :title="pageTitle" />
        
        <!-- 材料表格 -->
        <MaterialTable />
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import PageTitleBar from './components/PageTitleBar.vue';
import MaterialTable from './components/MaterialTable.vue';

// 页面标题
const pageTitle = ref('必备材料管理');
</script>

<style scoped>
.app-layout {
  display: flex;
  flex-direction: column;
  height: 100vh;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

.main-body {
  display: flex;
  flex: 1;
  overflow: hidden;
}


.main-content {
  flex: 1;
  background-color: #ecf0f1;
  padding: 15px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
</style>